import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/ui/pages/bar/controller.dart';
import 'package:flutter_demo/ui/pages/bar/widgets/my_loading.dart';
import 'package:flutter_demo/ui/pages/comic/home/controller.dart';
import 'package:get/get.dart';
import 'dart:ui' as ui;

import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

class PopularPage extends StatefulWidget {
  const PopularPage({Key? key}) : super(key: key);

  @override
  _PopularPageState createState() => _PopularPageState();
}

class _PopularPageState extends State<PopularPage> {
  final CarouselController _carouselController = CarouselController();
  final RefreshController _refreshController = RefreshController();
  final _listScroll = ScrollController();
  final _homeController = Get.find<HomeController>();

  int _current = 0;

  static const List<dynamic> _movies = [
    {
      'title': 'Black Widow',
      'image':
          'https://pics0.baidu.com/feed/838ba61ea8d3fd1f69c4d0a322ef171397ca5f82.jpeg?token=864c3f289b34d45e17039fcd8fd307a7',
      'description': 'Black Widow'
    },
    {
      'title': 'The Suicide Squad',
      'image':
          'https://img0.baidu.com/it/u=2932188870,235853835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=950',
      'description': 'The Suicide Squad'
    },
    {
      'title': 'Godzilla Vs Kong',
      'image':
          'https://img.jianbihua.com/sites/default/files/styles/nochange/public/images/2019-02/20190227170143_981908.jpg',
      'description': 'Godzilla Vs Kong'
    }
  ];

  @override
  void initState() {
    super.initState();
    _listScroll.addListener(() {
      _homeController.updateBar(_listScroll.position.pixels);
    });
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
        id: "barChange",
        builder: (control) {
          return Stack(children: [
            control.ifTransparent.value
                ? Container(
                    height: MediaQuery.of(context).size.height * 0.5,
                    width: MediaQuery.of(context).size.width,
                    child: Image.network(_movies[_current]['image'],
                        fit: BoxFit.cover),
                  )
                : SizedBox.shrink(),
            control.ifTransparent.value
                ? Positioned(
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    child: BackdropFilter(
                      filter: ui.ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
                      child: Container(
                        height: MediaQuery.of(context).size.height * 0.5,
                      ),
                    ))
                : SizedBox.shrink(),
            Positioned(
                top: control.barHeight,
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: SmartRefresher(
                    controller: _refreshController,
                    header: WaterDropHeader(
                      waterDropColor: Colors.green.shade700,
                      refresh: MyLoading(),
                      complete: Container(),
                      completeDuration: Duration.zero,
                    ),
                    onRefresh: () => _refreshController.refreshCompleted(),
                    child: ListView(controller: _listScroll, children: [
                      CarouselSlider(
                        options: CarouselOptions(
                          height: 300.0,
                          autoPlay: true,
                          aspectRatio: 16 / 9,
                          viewportFraction: 0.60,
                          enlargeCenterPage: true,
                          onPageChanged: (index, reason) {
                            setState(() {
                              _current = index;
                            });
                          },
                        ),
                        carouselController: _carouselController,
                        items: _movies.map((movie) {
                          return Builder(
                            builder: (BuildContext context) {
                              return Container(
                                height: 360,
                                width: MediaQuery.of(context).size.width * 0.6,
                                clipBehavior: Clip.hardEdge,
                                decoration: BoxDecoration(
                                  boxShadow: const [
                                    BoxShadow(
                                        color: Colors.black12,
                                        offset: Offset(2, 2),
                                        blurRadius: 10)
                                  ],
                                  borderRadius: BorderRadius.circular(20),
                                ),
                                child: Image.network(movie['image'],
                                    fit: BoxFit.fill),
                              );
                            },
                          );
                        }).toList(),
                      ),
                      Container(
                        child: Text("abc"),
                        alignment: Alignment.center,
                        height: 500,
                      )
                    ])))
          ]);
        });
  }
}
